<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生基本信息管理</title>
    <script src="../sys/vue.min.js"></script>
    <link rel="stylesheet" href="../css/stuinfo-vue.css" type="text/css"/>
</head>
<div id="app">
    <h3>学生基本信息管理</h3>
    <hr width="100%"/>
    <br/>
    <header>
        学号:<input style="width:100px;" v-model="no" type="text" value="">
        姓名:<input style="width:50px;" v-model="name" type="text" value="">
        性别: <select  v-model="sex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        生日:<input style="width:60px;"v-model="birth" type="text" value="">
        班级:
        <select  style="width:80px;" v-model="iclass">
            <option value="信息20-1班">信息20-1班</option>
            <option value="信息20-2班">信息20-2班</option>
        </select>
        住所:<input style="width:100px;"v-model="address" type="text" value="">
        <input class="button" @click="addStu()" v-model="xinzeng" type="button" />
        <input  style="width:200px;" v-model="sstxt" type="text"  value="">
        <select   style="width:80px;" v-model="sleop">
            <option v-model="quanbu">全部</option>
<!--             <option v-model="xuhao">按照序号搜索</option> -->
            <option v-model="xuehao">按照学号搜索</option>
            <option v-model="xingming">按照姓名搜索</option>
        </select>
        <input class="button" type="button" value="搜索" @click="searchStu()"/>
    </header>
        <br></br>
        <table id="stu" cellpadding="0" cellspacing="0">
            <tr>
                <td>序号</td>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>出生年月日</td>
                <td>班级</td>
                <td>宿舍位置</td>
                <td>操作</td>
            </tr>
            <tr v-for="(stu,i) in arrStu_new" :key="stu.no">
                <td>{{i+1}}</td>
                <td>{{stu.no}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.sex}}</td>
                <td>{{stu.birth}}</td>
                <td>{{stu.iclass}}</td>
                <td>{{stu.address}}</td>
                <td>
                    <input class="button" @click="delStu(stu.no)" type="button" value="删除" />
                    <input class="button" @click="modStu(stu.no)" type="button" value="修改" />
                </td>
            </tr>
            
        </table>
</div>
    <script src="../js/stuinfo-vue.js"></script>
</body>
</html>